<template>
  <div class="join-cart-end">
      <join-search></join-search>
      <div class="join-container">
          <div class="container">
              <span class="iconfont">&#xe617;</span>
              <h3>已成功加入购物车！</h3>
              <p>小米8 青春 全网通版 6GB内存 深空灰 64GB</p>
              <div class="btns">
                  <button class="goback">返回上一级</button>
                  <button class='goshoping' @click="goCart">去购物车结算</button>
              </div>
          </div>
      </div>
      <join-service></join-service>
  </div>
</template>

<script>
import JoinSearch from '@/components/Logo.vue'
import JoinService from './components/Service'
export default {
    name: 'JoinCart',
    methods: {
        goCart(){
            this.$router.push('/cart')
        }
    },
    components: {
        JoinSearch,
        JoinService
    }
}
</script>

<style lang="scss">
.join-container{
    min-height: 930px;
    background: #eee;
    padding-top: 130px;
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        .iconfont{
            color: rgba(0, 128, 0, 0.644);
            font-size: 80px;
        }
        h3{
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 60px;
            margin-top: 30px;
        }
        p{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #666666;
            margin-bottom: 100px;
        }
        button{
            width: 200px;
            height: 54px;
        }
        .goback{
            border: 1px solid #B7B7B7;
            background: inherit;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #666666;
            margin-right: 20px;
        }
        .goshoping{
            font-size: 16px;
        }
    }
}
</style>